---
description: Компонент для отрисовки кнопок в правом верхнем углу в compact-версии ModalPage и ModalCard.
---

<Overview group="modals">

# ModalOutsideButton [tag:component]

Компонент для отрисовки кнопок в правом верхнем углу в `compact`-версии `ModalPage` и `ModalCard`.
Внутрь компонента желательно передавать иконки размером `20px`,
все стили будут автоматически применены в соответствии с дизайн-системой.

Кнопка передается в свойство `outsideButtons` в `ModalPage` и `ModalCard`,
при необходимости передать несколько кнопок одновременно - воспользуйтесь `React.Fragment`.

</Overview>

import { BlockWrapper } from '@/components/wrappers';

<Playground Wrapper={BlockWrapper} style={{ width: 1 }}>
  ```jsx
  <ModalOutsideButton aria-label="Больше" onClick={() => {}}>
    <Icon20More />
  </ModalOutsideButton>
  <ModalOutsideButton aria-label="Нравится" onClick={() => {}}>
    <Icon20Like />
  </ModalOutsideButton>
  ```
</Playground>

## Доступность (a11y)

Чтобы кнопка была доступной для ассистивных технологий, нужно передать в нее скрытый визуально текст
через стандартное свойство `aria-label`, который сможет прочитать скринридер.

```jsx
<ModalOutsideButton aria-label="Больше" onClick={() => {}}>
  <Icon20More />
</ModalOutsideButton>
```

## Свойства и методы [#api]

<PropsTable name="ModalOutsideButton" />
